<template>
  <div class="login-container">
    <Card style="width:400px" title="后台登录" :padding="20">
      <div style="text-align:center">
        <Form
          ref="formValidate"
          :model="formValidate"
          :rules="ruleValidate"
          :label-width="80"
          label-position="left">
          <FormItem label="用户名" prop="name">
            <Input v-model="formValidate.name" placeholder="请输入你的用户名" />
          </FormItem>
          <FormItem label="密码" prop="password">
            <Input type="password" v-model="formValidate.password" placeholder="请输入你的密码" />
          </FormItem>
          <FormItem label="验证码" prop="captcha">
            <Input
              v-model="formValidate.captcha"
              placeholder="请输入验证码"
              clearable
              style="width: 120px;float:left;" />
            <span>
              <img :src="captchaURL" @click="randNum = Math.random()" title="点击刷新" />
            </span>
          </FormItem>
          <FormItem label="类别" prop="type" :required="true" style="text-align:left;">
            <RadioGroup v-model="formValidate.type">
              <Radio label="user" value="user">普通用户</Radio>
              <Radio label="admin" value="admin">管理员</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">登录</Button>
            <Button @click="handleRegester()" style="margin-left: 8px">注册</Button>
          </FormItem>
        </Form>
      </div>
    </Card>
  </div>
</template>
<script>
  export default {
    name: "Login",
    data () {
      return {
        randNum: Math.random(), //为刷新验证码图片地址准备的随机数字
        formValidate: {
          name: "",
          password: "",
          type: "user",
          captcha: ""
        },
        ruleValidate: {
          name: [
            {
              required: true,
              message: "请填写你的用户名",
              trigger: "blur"
            }
          ],
          password: [
            {
              required: true,
              message: "请输入你的密码",
              trigger: "blur"
            }
          ],
          captcha: [
            {
              required: true,
              message: "请填写验证码",
              trigger: "blur"
            }
          ]
        }
      };
    },
    computed: {
      //计算属性：返回验证码图片的地址
      //例如：<img src="http://127.0.0.1:8080/captcha/register?0.135123">
      captchaURL () {
        return this.$axios.defaults.baseURL + "/captcha/register?" + this.randNum;
      }
    },
    methods: {
      handleSubmit (name) {
        // 表单验证
        this.$refs[name].validate(valid => {
          if (valid) {
            // 更新验证码
            this.randNum = Math.random();
            //用qs模块把对象转字符串
            let params = this.$qs.stringify({
              name: this.formValidate.name,
              pwd: this.formValidate.password,
              type: this.formValidate.type,
              captcha: this.formValidate.captcha
            });
            // 发送登录请求
            this.$axios
              .post("/user/login", params)
              .then(res => {
                // console.log(res.data);
                if (res.data.code == 200) {
                  //登陆成功
                  this.$Message.success("登录成功");
                  //本地存储登录状态
                  window.sessionStorage.setItem("isLogin", true);
                  // 存储用户类别
                  window.sessionStorage.setItem(
                    "userType",
                    this.formValidate.type
                  );
                  // 存储用户名
                  window.sessionStorage.setItem("uname", res.data.data.name);
                  //存用户信息
                  window.sessionStorage.setItem("userInfo", JSON.stringify(res.data.data));
                  //跳转到主页
                  this.$router.push("/");
                } else if (res.data.code == 410) {
                  this.$Message.error("验证码错误！");
                } else {
                  this.$Message.error("用户名或密码错误！");
                }
              })
              .catch(err => {
                console.error(err);
              });
            //console.log('执行到这里了')
          } else {
            this.$Message.error("请填写完整");
          }
        });
      },
      handleRegester () {
        //打开注册页
        this.$router.push("/regester");
      }
    }
  };
</script>
<style scoped>
  .login-container {
    background-image: url(../assets/login-bg.jpg);
    height: 100vh;
    position: relative;
  }
  .ivu-card {
    position: absolute;
    top: 30%;
    left: 60%;
  }
</style>
